<template>
  <div>
    <a-modal v-model="visible" title="修改用户信息" @ok="handleOk">
      <!-- 表单部分 -->
      <a-form-model
        ref="ruleForm"
        :model="alteruser"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-model-item label="用户名" prop="username">
          <a-input v-model="alteruser.username" disabled />
        </a-form-model-item>
        <a-form-model-item label="邮箱" prop="email">
          <a-input v-model="alteruser.email" />
        </a-form-model-item>
        <a-form-model-item label="手机" prop="mobile">
          <a-input v-model="alteruser.mobile" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { checkEmail, chenckMobile } from "../../../utils/check";
export default {
  data() {
    return {
      visible: false,
      // 验证规则
      rules: {
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: chenckMobile, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapState({
      //映射用户信息
      alteruser: (state) => state.home.alteruser || {},
    }),
  },
  methods: {
    //确定
    handleOk(e) {
      this.visible = false;
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return;
        try {
          await this.$store.dispatch("getSucc", this.alteruser);
          this.$message.success("添加成功！");
          this.$emit("alter1");
          this.$refs.ruleForm.resetFields();
        } catch (error) {
          this.$message.warning("添加失败！");
        }
      });
    },
    // 取消
    handleCancel(e) {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>